Vue.component("eltable",{
    data(){
        return{
            column:[]
        }     
    },
    mounted(){
   },
   props: {
         data: {
         type: Array,
         default: [],
       },
     },
   template:`<table border="1" cellpadding="20" cellspacing="0">
   <thead>
   <tr>
   <th v-for="thItem in column">{{thItem.label}}</th>
   </tr>
   </thead> 
   <tbody>
   <tr v-for="trItem in data">
   <td v-for="(tdItem , i) in column">
   {{column[i].$scopedSlots.default ? column[i].$scopedSlots.default(trItem)[0].text : trItem[tdItem.prop]}}
   </td>
   </td>
   </tr>
   <slot></slot>
   </tbody> 
 </table>`
})

Vue.component("tablecolumn",{
   props:["prop","label"],
   template:`<span></span>`,
   mounted(){
       this.$parent.column.push(this)
   }
})
//表格组件
Vue.component('qfTable',{
    props:{
        columns:{
            type:Array,
            required:true,
        },
        data:{
            type:Array,
            required:true,
        }
    },
    template:`<table border="1" cellpadding="10" cellspacing="0">
            <thead>
                <tr>
                    <th v-for="thItem in columns">{{thItem.title}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="trItem in data">
                    <td v-for="tdItem in columns">
                        <template v-if="tdItem.render">
                        <span v-html="tdItem.render(trItem)"></span>
                        </template>    
                        <template v-else="tdItem.render">
                        {{trItem[tdItem.key]}}
                        </template>    
                        
                    </td>
                </tr>
            </tbody>
        </table>`
})
//f分页组件
Vue.component('qfPage', {
    props: {
        total: {
            type: Number,
            default: 0,
        },
        pageSize: {
            type: Number,
            default: 2
        }
    },
    data() {
        return {
            totalPage: 0
        }
    },
    watch: {
        total: {
            handler(newdata) {
                this.totalPage = Math.ceil(this.total/this.pageSize)
            },
            immediate: true,
        }
    },
    template: `<div class="qf-page">
        <span v-for="num in totalPage" @click="$emit('click-page', num)">{{num}}</span>
    </div>`
}) 
//dialog组件
Vue.component('qfDialog',{
    props:{
        title:{
            type:String,
            default:'用户标题'
        },
        content:String,
        visible:{
            type:Boolean,
            default:false,
        }
    },
    template:`<div class="qf-dialog" v-if="visible">
            <div class="box">
                <div class="header">{{title}}</div>
                <div class="main">{{content}}</div>
                <div class="footer">
                    <button @click="$emit('update:visible',false)">取消</button>
                    <button>确定</button>
                </div>
            </div>
        </div>`
})
//loading2组件
Vue.component('loading2', {
    props:{
        state:{
            type:Boolean,
            default:false,
        }
    },
    template:`<div class="loading2" v-if="state" @click="$emit('update:state',false)">
            <span>loading...</span>
        </div>`
})
//loading1组件
Vue.component('loading1', {
    props:{
        state:{
            type:Boolean,
            default:false,
        }
    },
    template:`<div class="loading1" v-if="state">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>`
})
// 按钮组件
Vue.component('qfButton', {
    props:{
        title:{
            type:String,
            required:true,
        },
        type:{
            type:String,
            default:'primary'
        }
    },
    template:`<button :class="['qf-button', 'qf-button--'+type, 'qf-button--normal']">
            <div class="qf-button__content">
            <span class="qf-button__text">{{title}}</span>
            </div>
        </button>`
})
//导航栏
Vue.component('daohanglan', {
    props:{
        title:{
            type:String,
            required:true,
        },
        leftArrow:Boolean,
    },
    template:`<div class="daohanglan">
            <span @click="$emit('click-left')">
            {{leftArrow?'<返回':' '}}
            </span>    
            <span>{{title}}</span>    
            <span @click="$emit('click-right')">搜索</span>    
        </div>`
})
//表单组件
Vue.component('biaodan', {
    props: {
        state: {
            type:Boolean,
            default:true
        }
    },
    data () {
        return {
            yonghushuju:{
                account:'',
                password:''
            }
        }
    },
    template:`<fieldset>
            <legend>表单组件</legend>
            用户名:<input type="text" v-model="yonghushuju.account"/>
            密码:<input type="password" v-model="yonghushuju.password"/>
            <button v-if="state" @click="$emit('biaodantijiao',yonghushuju)">提交</button>
        </fieldset>`
})
